<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>省级联动</title>
</head>
<body>
        <select name="" id="province">
                <option value="-1">请选择</option>
            </select>
            <select name="" id="city"></select>
            <select name="" id="country"></select>
            <script>
                var provinceArr = ['上海', '江苏', '河北'];
                var cityArr = [['上海市'], ['苏州市', '南京市', '扬州市'], ['石家庄', '秦皇岛', '张家口']];
                var countryArr =
                [
                     [
                        ['黄浦区', '静安区', '长宁区', '浦东区']
                    ], [
                        ['虎丘区','吴中区', '相城区', '姑苏区', '吴江区'],
                ['玄武区', '秦淮区', '建邺区', '鼓楼区', '浦口区'],
                    ['邗江区', '广陵区', '江都区']
        
                ], 
                [
                    ['长安区', '桥西区', '新华区', '井陉矿区'],
                    ['海港区', '山海关区', '北戴河区', '抚宁区'],
                    ['桥东区', '桥西区', '宣化区', '下花园区']
                ]
        ];
                function createOption(obj, data) {
                    for (var i in data) {
                        var op = new Option(data[i], i);
                        obj.options.add(op);
                    }
                }
                var province = document.getElementById('province');
                createOption(province, provinceArr);
                var city = document.getElementById('city');
                province.onchange = function () {
                    city.options.length = 0;
                    createOption(city, cityArr[province.value]);
                };
                var country = document.getElementById('country');
                city.onchange = function () {
                    country.options.length = 0;
                    createOption(country, countryArr[province.value][city.value]);
        
                }
                Province.onchange = function () {
                    city.options.length = 0;
                    createOption(city, cityArr[province.value]);
                    if (province.value >= 0) {
                        city.onchange();
                    } else {
                        country.options.length = 0
                    }
                };
            </script>
        
        
</body>
</html>